<template>
  <!-- 工作量列表 -->
  <div>
    <div class="box">
      <!-- 头部form表单 -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline form_top"
      >
        <el-form-item label="人员搜索:">
          <el-input v-model="formInline.userName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="角色:">
          <el-select v-model="formInline.roleId" placeholder="请选择">
            <el-option
              v-for="item in role"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="formbutton"
            @click="onSubmit"
          >查询</el-button>
        </el-form-item>
      </el-form>
      <!-- form表单下按钮 -->
      <div class="button_top">
        <!-- table表格 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          class="table_top"
          :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
        >
          <el-table-column prop="index" label="序号" width="80px" />
          <el-table-column prop="userName" label="人员名称" align="center" />
          <el-table-column prop="roleName" label="角色" align="center" />
          <el-table-column prop="mobile" label="联系电话" align="center" />
          <el-table-column
            prop="workCount"
            label="完成工单(本月)"
            align="center"
          />
          <el-table-column
            prop="progressTotal"
            label="进行中工单"
            align="center"
          />
          <el-table-column
            prop="cancelCount"
            label="拒绝工单(本月)"
            align="center"
          />
          <el-table-column prop="address" label="操作" align="center">
            <template #default="{ row }">
              <el-button
                type="text"
                class="button_table_foot"
                @click="openDialog(row.userId)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div v-show="totalCount !== 1" class="foot">
          <p>
            共{{ totalCount }}条记录 第 {{ formInline.pageIndex }}/{{
              totalPage
            }}页
          </p>
          <div class="foot_button">
            <el-button
              plain
              :class="{
                foot_button_top: true,
                isdis: formInline.pageIndex === 1
              }"
              :disabled="formInline.pageIndex === 1"
              @click="upPage"
            >上一页</el-button>
            <el-button
              plain
              :class="{
                foot_button_foot: true,
                isdis: totalPage === formInline.pageIndex
              }"
              :disabled="totalPage === formInline.pageIndex"
              @click="nextPage"
            >下一页</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog title="人员详情" :visible.sync="dialogVisible" width="40%">
      <div class="top" style="width: 100%">
        <div>
          人员名称: <span>{{ dialogData.userName }}</span>
        </div>
        <div>角色:{{ dialogData.roleName }}</div>
        <div>联系电话: {{ dialogData.mobile }}</div>
        <div>负责区域:{{ dialogData.regionName }}</div>
      </div>
      <el-table
        :data="listData"
        border
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#f3f6fb' }"
      >
        <el-table-column prop="data" align="center" />
        <el-table-column prop="total" label="总工单数" align="center" />
        <el-table-column prop="cancelCount" label="拒绝工单" align="center" />
        <el-table-column prop="workCount" label="完成工单" align="center" />
        <el-table-column
          prop="progressTotal"
          label="进行中工单"
          align="center"
        />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  getWorkList,
  getRoleList,
  detailPersonnelList,
  getTaskList
} from '@/api/personnel'
export default {
  name: 'Tektor',
  components: {},
  data() {
    return {
      formInline: {
        userName: null,
        roleId: null,
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [],
      totalCount: 0,
      totalPage: 0,
      role: '',
      dialogVisible: false,
      listData: [],
      dialogData: ''
    }
  },
  async created() {
    this.initData()
    // 角色
    const data = await getRoleList()
    console.log(data)
    this.role = data
  },
  methods: {
    onSubmit() {
      this.initData()
    },
    // 数据
    async initData() {
      const data = await getWorkList(this.formInline)
      data.currentPageRecords = data.currentPageRecords.map((item, index) => {
        const indexs = (this.formInline.pageIndex - 1) * 10 + index + 1
        const obj = { index: indexs }
        item = { ...obj, ...item }
        return item
      })
      console.log(data)
      this.tableData = data.currentPageRecords
      this.totalCount = data.totalCount
      this.totalPage = data.totalPage
    },
    // 上一页
    upPage() {
      this.formInline.pageIndex--
      if (this.formInline.pageIndex < 1) {
        this.formInline.pageIndex = 1
      }
      this.initData()
    },
    // 下一页
    nextPage() {
      this.formInline.pageIndex++
      if (this.formInline.pageIndex >= this.totalPage) {
        this.formInline.pageIndex = this.totalPage
      }
      this.initData()
    },
    // 打开弹窗详情
    async openDialog(id) {
      const data = await detailPersonnelList(id)
      console.log(data)
      this.dialogData = data
      const week = await getTaskList({
        userId: id,
        start: '2023-06-12 00:00:00',
        end: '2023-06-16 23:59:59'
      })
      console.log(week)
      const weeks = { data: '本周', ...week }
      this.listData.push(weeks)
      console.log(this.listData)
      const month = await getTaskList({
        userId: id,
        start: '2023-06-01 00:00:00',
        end: '2023-06-16 23:59:59'
      })
      console.log(month)
      const months = { data: '本月', ...month }
      this.listData.push(months)
      const year = await getTaskList({
        userId: id,
        start: '2023-01-01 00:00:00',
        end: '2023-06-16 23:59:59'
      })
      console.log(year)
      const years = { data: '本年', ...year }
      this.listData.push(years)
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  margin: 10px 15px 0 15px;
  .demo-form-inline.form_top {
    height: 60px;
    background-color: #fff;
    padding-top: 11px;
    padding-left: 20px;
    ::v-deep .el-form-item__label {
      font-weight: normal;
    }
    .formbutton {
      background-color: #5f84ff;
    }
  }
  .button_top {
    margin-top: 15px;
    background-color: #fff;
    padding-left: 15px;
    padding-top: 15px;
    margin-bottom: 15px;
    .table_top {
      .button_table_foot {
        color: #5f84ff;
      }
    }
    .foot {
      display: flex;
      justify-content: space-between;

      margin-top: 40px;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 30px;
      p {
        color: #dbdfe5;
      }
      .foot_button {
        height: 30px;
        line-height: 30px;
        .foot_button_top {
          margin-right: 15px;
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
        .foot_button_foot {
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
        .isdis {
          background-color: #edf0f9 !important;
          color: #d8dde6 !important;
        }
      }
    }
  }
}
.el-dialog {

  .top {
    width: 100%;
    height: 86px;
    background: #f3f6fb;
    display: flex;
    padding: 19px;
    flex-wrap: wrap;
    line-height: 30px;
    margin-bottom: 30px;
    div {
      width: 200px;
    }
  }
}
::v-deep  .el-dialog__title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
  }
</style>
